<template>
   <view>
      <view class="content">
         <view class="header">
            <view class="header_top">
               <view class="left">
                  <u-icon name="arrow-left" :size="20" @click="goBack()"></u-icon>
                  <text style="margin-left: 10px;">{{cur.day}}</text>
                  <image
                     src="/static/tab1/icon_arrow_solid.png"
                     mode="scaleToFill"
                  />
               </view>
               <view class="right">
                  <image @click="calendar = !calendar"
                     src="/static/tab1/icon_calendar.png"
                     mode="scaleToFill"
                  />
               </view>
            </view>
            <view class="header_body" :style="{'--day-width': `calc((100vw - 110px) / 7)`}">
               <view class="calendar" v-if="calendar">
                  <view class="weeks">
                     <view class="item" :style="{color: `${cur.day.indexOf(label) != -1 ? '#212126' : '#BEBEC4'}`}"
                     v-for="(label, index) in weekLabel" :key="index">
                        {{ label }}
                     </view>
                  </view>
                  <view class="calendar_month">
                     <view class="calendar_day" v-for="(day, index) in months" :key="index"
                     :class="{'current': day.curMonth, 'actived': day.date == cur.date}" @click="selectItem(day)">
                        {{ day.value }}
                     </view>
                  </view>
               </view>
               <view class="weeks" v-else>
                  <view class="week" v-for="(date, index) in week" :key="index" 
                  :class="{'curitem': cur.date == date.date}" @click="selectItem(date)">
                     <text>{{ date.label }}</text>
                     <text>{{ date.value }}</text>
                  </view>
               </view>
            </view>
         </view>
         <view class="body">
            <u-empty v-if="courseList.length == 0 && (cur.day.indexOf('日') != -1 || cur.day.indexOf('六') != -1)" 
            icon="/static/tab1/icon_ly.png" text="今天是假期，出去走走吧" marginTop="30px"></u-empty>
            <u-empty v-else-if="courseList.length == 0" marginTop="30px"
            icon="/static/tab1/icon_course_yd.png" text="今天没课，出去运动一下吧"></u-empty>
            <view class="panel_content" v-else>
               <view class="item" v-for="(item, i) in courseList" :key="i">
                  <view class="item_wrap">
                     <view class="item_index">
                        <view>{{ i + 1 }}</view>
                        <view>{{ item.timeLabel }}</view>
                     </view>
                     <view class="item_content">
                        <view class="item_content_title">
                           <text>{{ item.subject }}</text>
                        </view>
                        <view class="item_content_label">
                           <text style="padding-right: 10px;">{{ item.teacher }}</text>
                           <text>{{ item.position }}</text>
                        </view>
                        <!-- <view class="item_content_desc">
                           <text style="padding-right: 10px;">{{item.timeIndex}}</text>
                           <text>{{item.time}}</text>
                        </view> -->
                     </view>
                  </view>
               </view>
            </view>
         </view>
         <view class="footer" @click="show = true">
            <u-icon name="setting-fill" :size="20" style="margin-right: 5px;"></u-icon>
            设置第一周开始时间
         </view>
      </view>

      <u-datetime-picker :show="show" title="设置第一周开始时间" mode="date" v-model="date"
      @cancel="show = false" @confirm="getTime"></u-datetime-picker>
   </view>
</template>

<script>
import {
   week as tools
} from '@/utils/date'
import {
   calendar
} from '@/utils/calendar'
import {
   getCourseList
} from '@/api/course'
import {
   courseTime
} from '@/utils/constants'
import moment from '@/common/moment.js'
export default {
   data() {
      return {
         cur: {
            date: '',
            day: '',
         },
         months: [],
         calendar: false,
         courses: [],
         courseList: [],
         width: '',
         show: false,
         date: new Date().getTime()
      }
   },
   computed: {
      week() {
         const arr = []
         const curdate = new Date(this.cur.date)
         for(let i = 7; i > 0; i--) {
            let days = curdate.getDay()
            if(curdate.getDay() == 0) {
               days = 7
            }
            const dd = new Date(curdate.getFullYear(), curdate.getMonth(), curdate.getDate() - (days - i))
            arr.push({
               value: moment(dd).format('DD'),
               label: tools(dd.getDay()).substring(1, 2),
               date: moment(dd).format('yyyy-MM-DD'),
               week: dd.getDay()
            })
         }
         return arr.sort((a, b) => {
            return a.value - b.value
         })
      },
      weekLabel() {
         const arr = []
         for(let i = 1; i < 7; i++) {
            arr.push(tools(i).substring(1, 2))
         }
         arr.push(tools(0).substring(1, 2))
         return arr
      }
   },
   created() {
      if(this.$store.getters.term) {
         this.date = this.$store.getters.term
         this.getCourseData()
      }else {
         this.show = !this.$store.getters.term
      }
      this.$set(this.cur, 'date', moment(new Date()).format('yyyy-MM-DD'))
      this.$set(this.cur, 'day', tools(new Date().getDay(), '0'))
      this.months = calendar()
   },
   methods: {
      goBack() {
         uni.navigateBack()
      },
      selectItem(date) {
         this.courseList = []
         this.$set(this.cur, 'date', date.date)
         this.$set(this.cur, 'day', tools(date.week, '0'))
         this.timer && clearTimeout(this.timer)
         this.timer = setTimeout(() => {
            this.calendar = false
            const courses = this.courses.filter(item => {
               return item.date == date.date
            }).sort((a, b) => {
               return a.time - b.time
            })
            courses.forEach(item => {
               item.timeLabel = courseTime[item.time]
               this.courseList.push(item)
            })
         }, 200)
      },
      getCourseData() {
         const params = {}
         params.id = this.$store.getters.id
         params.time = this.date
         getCourseList(params).then(res => {
            this.show = false
            this.$store.getters.term || this.$store.dispatch('storeTerm', this.date)
            if(res.code === 200) {
               this.courses = res.data
               const date = {
                  value: moment(new Date()).format('DD'),
                  label: tools(new Date().getDay()).substring(1, 2),
                  date: moment(new Date()).format('yyyy-MM-DD'),
                  week: new Date().getDay()
               }
               this.selectItem(date)
            }
         })
      },
      getTime(val) {
         this.getCourseData()
      }
   }
}
</script>

<style lang="scss" scoped>
   .content {
      height: 100vh;
      padding-top: var(--status-bar-height);
      box-sizing: border-box;
   }
   
   .header {
      position: relative;
      width: 100%;
      height: 130px;
      margin-top: var(--status-bar-height);
      box-sizing: border-box;
      z-index: 999;

      &_top {
         display: flex;
         align-items: center;
         height: 44px;
         padding: 0 10px;
         box-sizing: border-box;
         background-color: #ffffff;
      }

      .left {
         display: flex;
         align-items: center;
         width: 100%;

         text {
            margin-right: 10px;
            font-size: 24px;
            font-weight: 500;
         }

         image {
            width: 24px;
            height: 24px;
            margin-right: 10px;
         }
      }

      .right {
         display: flex;
         align-items: center;
         justify-content: flex-end;
         width: 100%;

         image {
            width: 24px;
            height: 24px;
         }
      }

      &_body {
         position: absolute;
         top: 44px;
         width: 100%;
         padding: 10px;
         border-radius: 0 0 14px 14px;
         box-sizing: border-box;
         background-color: #ffffff;

         .weeks {
            display: flex;
            align-items: center;

            .week {
               display: flex;
               flex-direction: column;
               justify-content: center;
               width: 100%;
               border-radius: 8px;
               border: 1px solid transparent;
               padding: 5px 10px;
               margin: 5px;
               background-color: #F7F7FA;
               text-align: center;

               text:last-child {
                  font-size: 16px;
                  font-weight: 550;
               }
            }

            .curitem {
               background-color: #ffffff;
               border: 1px solid #212126;
            }
         }
      }

      .calendar {

         &_month {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
         }

         &_day {
            display: flex;
            align-items: center;
            justify-content: center;
            width: var(--day-width);
            height: var(--day-width);
            padding: 5px;
            box-sizing: border-box;
            border-radius: 50%;
            margin: 10px 15px 5px 0;
            background-color: #F7F7FA;
            color: #BEBEC4;

            &:nth-child(7n) {
               margin-right: 0;
            }
         }

         .current {
            color: #212126;
         }

         .actived {
            background-color: #212126;
            color: #ffffff;
         }

         .item {
            width: var(--day-width);
            text-align: center;
            margin-right: 15px;

            &:nth-child(7n) {
               margin-right: 0;
            }
         }
      }
   }

   .panel_content {
      width: auto;
      margin: 10px;
   }

   .body {
      height: calc(100vh - var(--status-bar-height) - 130px - 60px);
      overflow-y: auto;

      .item {
         width: 100%;
         margin: 0 auto;
         border-radius: 8px;
         color: #333;
         z-index: 1;

         &_wrap {
            display: flex;
            align-items: center;
            width: auto;
            padding: 10px 0;
            margin: 0 10px;
         }

         &_index {
            position: relative;
            display: block;
            margin-right: 20px;
            border-radius: 8px;
            color: #333;
            font-size: 14px;
            text-align: center;
            z-index: 1;

            view:last-child {
               color: #999;
            }

            &::before {
               content: "";
               position: absolute;
               top: 0;
               left: 50%;
               height: 100%;
               transform: translate(-50%, -100%);
               border: 1px dashed #cccccc;
               z-index: 0;
            }

            &::after {
               content: "";
               position: absolute;
               top: 100%;
               left: 50%;
               transform: translateX(-50%);
               height: 100%;
               border: 1px dashed #cccccc;
               z-index: 0;
            }
         }

         &_content {
            width: 100%;
            padding: 20px;
            border-width: 2px;
            border-style: solid;
            border-radius: 14px;

            &_title {
               font-size: 18px;
               font-weight: bold;
               line-height: 28px;
            }

            &_label {
               line-height: 20px;
            }

            &_desc {
               line-height: 20px;
            }
         }

         &:nth-child(1) {

            .item_index::before {
               display: none;
            }
         
            .item_content {
               border-color: rgba($color: #F55142, $alpha: .3);
               background-color: #FCF0F2;
               color: #F55142;
            }
         }

         &:nth-child(2) {

            .item_content {
               border-color: rgba($color: #5499DE, $alpha: .3);
               background-color: #E6F3FC;
               color: #5499DE;
            }
         }

         &:nth-child(3) {

            .item_content {
               border-color: rgba($color: #59BA56, $alpha: .3);
               background-color: #E6FCE9;
               color: #59BA56;
            }
         }

         &:nth-child(4) {
            .item_content {
               border-color: rgba($color: #996BE8, $alpha: .3);
               background-color: #F1EDFC;
               color: #996BE8;
            }
         }

         // &:nth-child(5) {
            
         //    .item_content {
         //       border-color: rgba($color: #80D9D9, $alpha: .3);
         //       background-color: #D5F7F7;
         //       color: #80D9D9;
         //    }
         // }

         &:nth-child(5) {

            .item_content {
               border-color: rgba($color: #F0B52A, $alpha: .3);
               background-color: #fff5bd;
               color: #F0B52A;
            }
         }

         &:last-child {
            .item_index::after {
               display: none;
            }
         }
      }
   }

   .footer {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 60px;
      background-color: #ffffff;
      font-size: 16px;
      font-weight: 550;
   
      image {
         width: 24px;
         height: 24px;
      }
   }
</style>
